<template>
  <div class="main">
    <div class="loginbox center">
      <i class="iconfont icon-02_dianpuguanli center" />
      <p class="login_title center">mall-admin-web</p>
      <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="loginform center"
        @submit="handleSubmit"
      >
        <a-form-item :wrapper-col="{ span: 22 }">
          <a-input
            v-decorator="[
              'username',
              {
                rules: [
                  { whitespace: true, message: '请输入用户名' },
                  { required: true, message: '请输入用户名' },
                  { validator: verifyName, message: '请输入正确的用户名' }
                ]
              }
            ]"
            placeholder="Username"
          >
            <a-icon slot="prefix" type="user" class="color" />
          </a-input>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 22 }">
          <a-input-password
            v-decorator="[
              'password',
              {
                rules: [
                  { whitespace: true, message: '请输入密码' },
                  { required: true, message: '请输入密码' },
                  { validator: verifyPwd, message: '请输入正确的密码' }
                ]
              }
            ]"
            placeholder="Password"
          >
            <a-icon slot="prefix" type="lock" theme="filled" class="color" />
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-button
            class="formbtn"
            type="primary"
            html-type="submit"
          >登录</a-button>
          <a-button
            class="formbtn"
            type="default"
            @click="clear"
          >重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="backimg center" />
    <a-spin v-if="show" class="loading center">
      <a-icon
        slot="indicator"
        type="loading"
        style="font-size: 24px"
        class="center"
      />
    </a-spin>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import { userLogin } from '@/api/user.js'
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: 'login_form' }),
      show: false
    }
  },
  methods: {
    verifyName(rule, value, callback) {
      if (value !== 'sixday') return callback(new Error())
      callback()
    },
    verifyPwd(rule, value, callback) {
      if (value !== '123456') return callback(new Error())
      callback()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        err && message.error('请输入正确的信息', 3 * 1000)
        if (values.username === 'sixday' && values.password === '123456') {
          this.show = true
          setTimeout(() => {
            userLogin(values)
              .then((res) => {
                message.success('登录成功!')
                this.$store.commit('user/SAVE_TOKEN', res)
                this.$router.push('/dashboard')
              })
              .catch((err) => {
                message.error(err, 3 * 1000)
              })
              .finally(() => {
                this.show = false
              })
          }, 500)
        }
      })
    },
    clear() {
      this.$nextTick(() => {
        this.form.resetFields()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 基础盒模型
@mixin box($width, $height, $bgc: '') {
  width: $width;
  height: $height;
  background-color: $bgc;
}
// 基础flex布局
@mixin flex($jc: space-between, $ai: center) {
  display: flex;
  justify-content: $jc;
  align-items: $ai;
}
// 绝对居中
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
$color: #409eff;

.main {
  @include box(100vw, 100vh);
}

.color {
  color: $color;
}

.backimg {
  @include box(100%, 35%);
  top: 40%;
  background-color: $color;
  background-image: url('~@/assets/login_bci.png');
  z-index: -9999;
}

.loginbox {
  position: relative;
  @include box(350px, 400px, #fff);
  top: 36%;
  display: block;
  box-shadow: 1px 1px 5px 3px #0000000a;
  border-radius: 5px;

  &::after {
    @include box(100%, 10px, $color);
    content: '';
    display: block;
    position: absolute;
    top: 0;
    border-radius: 2px;
  }

  .icon-02_dianpuguanli {
    top: 15%;
    color: $color;
    font-size: 70px;
  }

  .login_title {
    font-size: 22px;
    font-weight: 700;
    color: $color;
    top: 30%;
  }

  .loginform {
    top: 60%;
    width: 100%;

    .formbtn {
      width: 150px;
      margin: 0 5px;
    }
  }
}

.loading {
  z-index: 9999;
  @include box(100vw, 100vh, #ffffffc8);
}

::v-deep .ant-form-item {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
::v-deep .ant-input-affix-wrapper .ant-input:not(:first-child) {
  height: 40px;
}
::v-deep .loginbox .loginform .formbtn {
  height: 45px;
}
::v-deep
  .ant-input:hover
  .ant-input-affix-wrapper:hover
  .ant-input:not(.ant-input-disabled) {
  border-color: #67c23a;
  border-right-width: 1px !important;
}
::v-deep .ant-input:focus {
  border-color: #67c23a;
  border-right-width: 1px !important;
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px #67c23a49;
  box-shadow: 0 0 0 2px #67c23a49;
}
</style>
